import QtQuick 2.6
import QtQuick.Layouts 1.1

import "../../Base/UiBase"
import "../../Base/Config"

Item {
    id: root
    property string page: "" // "", "newPost", "share", "sign"
    property double duration: 300
    MouseArea {
        visible: page !== ""
        anchors.fill: parent
        onClicked: page = ""
    }

    ColumnLayout {
        anchors.fill: parent
        spacing: 0
        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Loader {
                id: loader

                y: 100 * Size.ratio
                width: parent.width
                height: parent.height - y

                property var sources: ({
                                           "": "",
                                           newPost: "../MiniPage/NewPost/Index.qml",
                                           share: "../MiniPage/Share/Index.qml",
                                           sign: "../MiniPage/Sign/Index.qml"
                                       })
                source: sources[page]
                Connections {
                    target: loader.item
                    ignoreUnknownSignals: true
                    onVisibleChanged: if(!visible) page = ""
                }
            }
        }

        Item {
            Layout.fillWidth: true
            Layout.preferredHeight: (110 + 18 + 18) * Size.ratio
            Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom

            Row {
                anchors.centerIn: parent
                Item {
                    width: 110 * Size.ratio
                    height: 110 * Size.ratio
                    z: -1
                    ImageButton {
                        onClicked: page = "sign"

                        x: page !== "" ? 0 : -width
                        width: 110 * Size.ratio
                        height: 110 * Size.ratio
                        opacity: page !== "" ? 1 : 0
                        source: page === "sign" ? "../../../resources/tcommunity/qiandao02.svg" : "../../../resources/tcommunity/qiandao01.svg"

                        Behavior on x {
                            NumberAnimation {duration: root.duration}
                        }
                        Behavior on opacity {
                            NumberAnimation {duration: root.duration}
                        }
                    }
                }
                Item {
                    width: 110 * Size.ratio
                    height: 110 * Size.ratio
                    ImageButton {
                        onClicked: page = "newPost"

                        width: 110 * Size.ratio
                        height: 110 * Size.ratio
                        source: page === "newPost" ? "../../../resources/tcommunity/fadongtai02.svg" : "../../../resources/tcommunity/fadongtai01.svg"
                    }
                }
                Item {
                    width: 110 * Size.ratio
                    height: 110 * Size.ratio
                    z: -1
                    ImageButton {
                        onClicked: page = "share"

                        x: page !== "" ? 0 : width
                        width: 110 * Size.ratio
                        height: 110 * Size.ratio
                        opacity: page !== "" ? 1 : 0
                        source: page === "share" ? "../../../resources/tcommunity/fenxiang02.svg" : "../../../resources/tcommunity/fenxiang01.svg"

                        Behavior on x {
                            NumberAnimation {duration: root.duration}
                        }
                        Behavior on opacity {
                            NumberAnimation {duration: root.duration}
                        }
                    }
                }
            }
        }
    }
}
